<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引用Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
<style>
* {
	margin: 0;
	padding: 0;
}

.app {
	width: 750px;
	height: 500px;
}

.portlet-default {
	padding: 20px;
}
.avatar-uploader 
.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
        
 </head>

<body>
			<div id="app" class="app">
		<div class="portlet-heading portlet-default">
			<h4 class="modal-title text-dark" align="center">
				<span set-lan="html:产品管理权限"></span>
			</h4>
			<hr class="border-t-a">
		</div>
		<div class="modal-content">
			<div>
<<<<<<< HEAD
				<h4 class="modal-title" id="centerpop_Title">角色用户设置</h4>
			</div>
			<div id="centerpop_cont">
				<strong>设置拥有该角色的用户</strong><br> <br> 说明：
				<ol>
						<ul class="list_style_3">
							<li class="text-danger">点击输入框可实现对拥有该角色的用户进行修改</li>
						</ul>
				</ol>
				<el-form :model="form" :rules="rules" ref="form" label-width="100px"
					class="demo-form">
					<br/>
				<div id="div_dAE8k">
					<el-form-item label="" prop="value5"> 
					
					<template  style="width=150px;">
					<el-select v-model="form.value5" multiple placeholder="请选择"  @remove-tag="deleteTag">
					<el-option v-for="item in options" :key="item.value"
						:label="item.label" :value="item.value"> </el-option> </el-select> 
						</template>
						
						 </el-form-item>
						 <el-input v-model="form.roleid" v-show="false"></el-input>
						 <el-input v-model="form.values" v-show="false"></el-input>
						 
						 <el-dialog	:visible.sync="centerDialogVisible3" width="30%" center>
													<span>确定要修改拥有该角色的用户吗？ </span> <span slot="footer"
														class="dialog-footer"> <el-button
															@click="centerDialogVisible3 = false">取消</el-button> <el-button
															type="primary" @click="submitForm('form')">确定</el-button>
													</span> </el-dialog>
				</div>
				
				<p class="text-center">
					<el-button type="primary" @click="centerDialogVisible3=true">设置</el-button>
				</p>

				</el-form>
			</div>

			<script>
			var vm = new Vue({
				el: "#centerpop_cont",
				data() {
					return {
						options:[],
						centerDialogVisible3:false,
						form: {
							value5:[],
							values:[],
							roleid:""
						},
						//验证规则
						rules: { //数据源model
							
						}

					};
        },
				methods: {
					submitForm(formName) {
						var xm=[];
						for(var x in this.options){
							if(this.form.value5.length<=0){
								xm.push(this.options[x].value);
							}else{
								for (var i in this.form.value5){
									alert("this.options       "+this.options[x].value);
									alert("this.value5        "+this.form.value5[i]);
									if(this.options[x].value==this.form.value5[i]){
										
									}else{
										xm.push(this.options[x].value);
									}
								}
							}
						}
						this.form.values=xm;
						alert("hshshs        "+xm);
						
					//	alert(this.form.value5);
						//验证方法
						this.$refs[formName].validate((valid) => {
							if(valid) {
								//post提交数据
								axios.post("/setUserRolett",
									//参数转换
									Qs.stringify(this.form, {
										arrayFormat: 'brackets'
									})
									
								).then(function(v) {
									
								}).catch(function(e) {
									alert("出错了"+e);
								});

							} else {
								console.log('error submit!!');
								return false;
							}
						});
						/* window.close();
						parent.location.reload();  */
					},
					signoutuser:function(){
=======
				<h4 class="modal-title" id="centerpop_Title">角色权限设置</h4>
			</div>
			<div id="centerpop_cont">
				<strong>设置维修权限</strong><br> <br> 说明：
				<ol>
					<li>对于维修部中的角色权限：
						<ul class="list_style_3">
							<li>维修部内可分为：<b class="text-danger">接单人员、检测人员、维修人员</b>三种角色
							</li>
							<li class="text-danger">接单人员负责：接单步骤、客户确认步骤、客户沟通、交付步骤</li>
							<li class="text-danger">检测人员负责：检测步骤</li>
							<li class="text-danger">维修人员负责：维修步骤</li>
							<li class="text-danger">可将三种角色赋予同一个用户</li>
						</ul>
					</li>

				</ol>
				<el-form :model="form" :rules="rules" ref="form" label-width="100px"
					class="demo-form">
					<br/>
				<div id="div_dAE8k">
					<el-form-item label="" prop="value5"> 
					
					<template  style="width=150px;">
					<el-select v-model="form.value5" multiple placeholder="请选择"  @remove-tag="deleteTag">
					<el-option v-for="item in options" :key="item.value"
						:label="item.label" :value="item.value"> </el-option> </el-select> 
						</template>
						
						 </el-form-item>
						 <el-input v-model="form.roleid" v-show="false"></el-input>
						 <el-input v-model="form.values" v-show="false"></el-input>
				</div>
				
				<p class="text-center">
					<el-button type="primary" @click="submitForm('form')">设置</el-button>
				</p>

				</el-form>
			</div>

			<script>
			var vm = new Vue({
				el: "#centerpop_cont",
				data() {
					return {
						options:[],			
						form: {
							value5:[],
							values:[],
							roleid:""
						},
						//验证规则
						rules: { //数据源model
							
						}

					};
        },
				methods: {
					submitForm(formName) {
						var xm=[];
						for(var x in this.options){
							if(this.form.value5.length<=0){
								xm.push(this.options[x].value);
							}else{
								for (var i in this.form.value5){
									alert("this.options       "+this.options[x].value);
									alert("this.value5        "+this.form.value5[i]);
									if(this.options[x].value==this.form.value5[i]){
										
									}else{
										xm.push(this.options[x].value);
									}
								}
							}
						}
						this.form.values=xm;
						alert("hshshs        "+xm);
						
					//	alert(this.form.value5);
						//验证方法
						this.$refs[formName].validate((valid) => {
							if(valid) {
								//post提交数据
								axios.post("/setUserRolett",
									//参数转换
									Qs.stringify(this.form, {
										arrayFormat: 'brackets'
									})
									
								).then(function(v) {
									
								}).catch(function(e) {
									alert("出错了"+e);
								});

							} else {
								console.log('error submit!!');
								return false;
							}
						});
						/* window.close();
						parent.location.reload();  */
					},
					deleteTag:function(){
>>>>>>> refs/remotes/origin/产品
						
					}
				},
				mounted() {
					this.options = ${roluse};
					this.form.roleid=${roidss};
					for(var x in this.options){
						this.form.value5.push(this.options[x].value);

					}
				}
			});
		</script>
		</div>
	</div>
</body>
</html>